
<template>
  <div class="withdrawal">
    <ComHeader title="订单详情" leftArrow="true"/>
    <div class="container" v-if="drawalList">
      <div class="box-status flex-display flex-center-align">
        <div
          class="flex-num-one f-w"
        >{{ drawalList.pt_code == 'A'?drawalList.order_status:drawalList.pt_status }}</div>
      </div>
      <div class="logistBox" v-if="drawalList && drawalList.tracking_number && logObj">
        <p>物流信息</p>
        <ul>
          <li>
            <p class="text-wrap flex-num-one text-overflow-2">{{logObj.status}}</p>
            <span>{{logObj.time}}</span>
          </li>
        </ul>
      </div>
      <div class="address">
        <p class="p-12">收货人信息</p>
        <p class="address-phone p-12">
          <span>{{drawalList.name}}</span>
          <span>{{drawalList.tel}}</span>
        </p>
        <div class="wrap-del flex-display flex-center-align">
          <span class="wrap-del__bg"></span>
          <p
            class="flex-num-one text-overflow-2 f-14"
          >{{drawalList.province}} {{drawalList.city}}{{drawalList.county}}{{drawalList.address}}</p>
        </div>
        <i></i>
      </div>
      <div class="wrap-box">
        <p class="wrap-box__tit f-14">
          <span>{{drawalList.shop}}</span>
          {{drawalList.number}}件商品
        </p>
        <ul class="pro">
          <li class="flex-display">
            <img :src="drawalList.goods_icon">
            <div class="flex-num-one">
              <p class="f-12 text-overflow-2">{{drawalList.pt_goods_name}}</p>
              <div class="pro-cart">
                <span class="theme-color">￥{{drawalList.per_price}}</span>
                <font>x{{drawalList.number}}</font>
              </div>
            </div>
          </li>
        </ul>
        <div class="totalBox">
          商品总金额
          <span>￥{{drawalList.pt_price}}</span>
        </div>
        <div class="totalBox">
          邮费
          <span>包邮</span>
        </div>
        <div class="totalBox" style="border-top: 1px solid #e5e5e5;">
          <span class="f-w">实付款 ￥{{drawalList.pt_price}}</span>
        </div>
      </div>
      <!--订单号 box-->
      <div class="orderno-box">
        <p><span>订单编号：</span>{{drawalList.pt_order_code}}</p>
        <p><span>快递单号：</span>{{drawalList.tracking_number?drawalList.tracking_number:'无'}}</p>
        <p><span>下单时间：</span>{{drawalList.addtime}}</p>
        <p><span>支付方式：</span>{{drawalList.pay_type}}</p>
        <p v-if="drawalList.get_logistics_company"><span>配送方式</span>{{drawalList.get_logistics_company}}</p>
      </div>
    </div>
    <footer class="flex-display">
      <div class="flex-num-one">
        <span class="theme-color"></span>
      </div>
      <template  v-if="drawalList && drawalList.pt_code == 'A' && drawalList.order_status == '未付款'">
        <button class="theme-background" @click="fnHandleOrderStatus(2)">支付</button>
      </template>
      <template v-if="drawalList && drawalList.pt_code != 'A' && drawalList.pt_status == '未付款' && drawalList.pt_info.pt_status != '拼团失败'">
        <button class="theme-background" @click="fnHandleOrderStatus(2)">支付</button>
      </template>
      <template v-if="drawalList && drawalList.pt_status == '拼团中'">
        <button class="theme-background first-btn" @click="fnHandleOrderStatus(1)">查看团详情</button>
      </template>
      <template v-if="drawalList && drawalList.pt_code == 'A' && drawalList.order_status == '已付款'">
        <button class="theme-background first-btn" @click="fnHandleOrderStatus(3)" v-if="drawalList.tracking_number">查看物流</button>
        <button class="theme-background" @click="fnHandleOrderStatus(4)">确定收货</button>
      </template>
      <template v-if="drawalList && drawalList.pt_code != 'A' && drawalList.pt_status == '拼团成功'">
        <button class="theme-background first-btn" @click="fnHandleOrderStatus(3)">查看物流</button>
        <button class="theme-background" @click="fnHandleOrderStatus(4)">确定收货</button>
        <button class="theme-background" @click="fnHandleOrderStatus(5)">评价</button>
      </template>
    </footer>
  </div>
</template>
<script>
import ComHeader from "@/common/ComHeader";
import Scroll from "@/base/scroll/scroll";
import Loading from "@/base/loading/loading";
import axios from "axios";
import { Toast, Indicator, MessageBox } from "mint-ui";
import { myPtStartDetail, ptOrderDefine, ptOrderPay } from '@/api/pingtuan'

export default {
  data() {
    return {
      drawalList: null, // 数据
      orderId: this.$route.query.order_id,
      logObj: null,
    };
  },
  created() {
    this.fnGetOrderDetail();
  },
  methods: {
    /**
     * @author yang
     * @desc 处理订单的各种情况
     * @param {Number} _num 当前数字 1 查看团详情 2 支付 3 查看物流  4确认收货  5评价
     */
    fnHandleOrderStatus(_num) {
      switch (_num) {
        case 1:
          // 查看团详情
          this.fnPtDetail();
          break;
        case 2:
          // 支付
          this.clickPtPay();
          break;
        case 3:
          // 查看物流
          this.fnOpenLogistics();
          break;
        case 4:
          // 确认收货
          this.fnSuregetgoods();
          break;
        default:
          this.fnOpenEvaluation()
          break;
      }
    },
    // 查看拼团详情
    fnPtDetail() {
      this.$router.push({
        path: "/pingtuan/detail",
        query: {
          order_no: this.drawalList.pt_order_code,
          order_id: this.$route.query.order_id,
        }
      });
    },
    // 立即支付
    clickPtPay() {
      var _this = this;
      ptOrderPay({
        openid: this.getUserInfo().openid,
        order_code: '['+ this.$route.query.order_id +']',
        pay_type: this.$route.query.get_type == 'buy'?'pt_buy':'pt_goods',
        total_fee: this.drawalList.pt_price,
      }).then(res=>{
        console.log(res)
        if(res.code == 0){
          this.wxChooseWXPay({
            appId: res.data.appid,
            timestamp: res.data.timeStamp,
            nonceStr: res.data.nonceStr,
            sign: res.data.sign,
            package: res.data.package,
            callback: function(res) {
              _this.payStatusSuccess(res, item);
            },
            errCallback: function() {
              _this.payStatusFail('', item);
            }
          })
        }else{
          Toast(res.msg)
          // 1s后调转到支付状态页面
          setTimeout(()=>{
            this.$router.push({
              path: '/pingtuan/payStatus',
              query: {
                payStatus: 'fail',
                orderCode: this.drawalList.pt_order_code
              }
            })
          }, 2000)
        }
      })
    },

    // 支付成功
    payStatusSuccess(res, item) {
      var _this = this;
      if(res && res.errMsg == "chooseWXPay:ok"){
        Toast({
          message: "支付成功",
          duration: 2000
        });

        // 2s后调转到支付状态页面
        setTimeout(()=>{
          _this.$router.push({
            path: '/pingtuan/payStatus',
            query: {
              payStatus: 'success',
              orderCode: this.drawalList.pt_order_code
            }
          })
        }, 2000)
      }else{
        this.payStatusFail('fail', item);
      }
    },

    // 支付失败
    payStatusFail(val, item) {
      var _this = this;
      Toast({
        message: val == 'fail'?'支付失败':'取消支付',
        duration: 2000
      });

      // 2s后调转到支付状态页面
      setTimeout(()=>{
        _this.$router.push({
          path: '/pingtuan/payStatus',
          query: {
            payStatus: 'fail',
            orderCode: this.drawalList.pt_order_code
          }
        })
      }, 2000)
    },
    /**
    * @desc 打开发布评价页面
    * @params {Object}  item 订单对象
    */
   fnOpenEvaluation() {
     this.$router.push({
       path: '/pingtuan/comment',
       query: {
         pt_order_code: this.drawalList.pt_order_code,
         photo: this.drawalList.ptgoods_thumb
       }
     })
   },
   // 确定收货
   fnSuregetgoods() {
     ptOrderDefine({
       uid: this.getUserInfo().id,
       pt_order_code: this.drawalList.pt_order_code,
       code: 1,
     }).then(res=>{
       if(res.code == 0){
         Toast('确定收货成功！')
         this.fnGetOrderDetail()
       }else{
         Toast(res.msg)
       }
     })
   },
    /**
     * @author yang
     * @desc 获取订单详情
     */
    fnGetOrderDetail() {
      Indicator.open({
        text: "加载中...",
        spinnerType: "fading-circle"
      });
      myPtStartDetail({ pt_id: this.orderId }).then(res=>{
        Indicator.close();
        this.drawalList = res.data;
      })
    },

    /**
     * @desc 查看物流
     */
    fnOpenLogistics() {
      this.$router.push({
        path: "/NewLogistics",
        query: {
          number: this.drawalList.tracking_number,
          photo: this.drawalList.ptgoods_thumb,
          logistics_company_code: this.drawalList.logistics_company_code
        }
      });
    },
  },
  components: {
    ComHeader,
    Loading,
    Toast,
    Indicator,
    MessageBox
  }
};
</script>

<style lang="scss" scoped>
.container {
  position: fixed;
  width: 100%;
  top: 70px;
  bottom: 0;
  background: #f3f3f3;
  overflow: auto;
  padding: 0 .3rem;
  padding-bottom: 1.8rem;
  .box-status {
    width: 100%;
    height: 70px;
    background: #fff;
    box-sizing: border-box;
    padding-left: 12px;
    border-bottom: 1px solid #e5e5e5;
  }
  .address {
    width: 100%;
    height: 108px;
    background: #fff;
    padding: 15px 0px;
    box-sizing: border-box;
    border-radius: 3px;
    position: relative;
    margin-top: 10px;
    p.p-12 {
      padding-left: 12px;
    }
    .address-phone {
      font-size: 12px;
      color: rgba(102, 99, 99, 1);
      margin-top: 6px;
      padding-left: 12px;
    }
    .wrap-del {
      width: 100%;
      height: auto;
      position: relative;
      margin-top: 5px;
      font-size: 14px;
      margin-bottom: 5px;
      box-sizing: border-box;
      padding-left: 12px;
      .wrap-del__bg {
        width: 8px;
        height: 10px;
        vertical-align: top;
        background: url("/static/ethel_img/shop/order_icon_location@2x.png")
          center center no-repeat;
        background-size: 100% 100%;
        margin-right: 10px;
      }
    }
    > i {
      position: absolute;
      width: 100%;
      height: 2px;
      background: url("/static/ethel_img/shop/order_img_adorn.png") center
        center no-repeat;
      background-size: 100% 100%;
    }
  }
  .wrap-box {
    width: 100%;
    height: auto;
    margin-top: 10px;
    background: #fff;
    border-radius: 3px;
  }
  .wrap-box__tit {
    width: 100%;
    height: 43px;
    line-height: 43px;
    text-align: right;
    padding-right: 12px;
    position: relative;
    border-bottom: 1px solid #e5e5e5;
    span {
      position: absolute;
      left: 10px;
    }
  }
  .pro {
    width: 100%;
    height: auto;
    position: relative;
    li {
      padding: 12px;
      box-sizing: border-box;
      img {
        width: 84px;
        height: 84px;
        display: block;
        margin-right: 12px;
      }
      .pro-cart {
        height: 40px;
        line-height: 40px;
        position: relative;
        > span {
          font-weight: bold;
          font-size: 16px;
        }
        > font {
          font-size: 10px;
          position: absolute;
          right: 10px;
          color: rgba(160, 154, 155, 1);
        }
      }
    }
  }
}
footer {
  height: 50px;
  line-height: 50px;
  background: #fff;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 5px 0;
  > div {
    text-align: right;
    padding-right: 10px;
    color: rgba(160, 154, 155, 1);
  }
  > button {
    outline: none;
    height: 100%;
    display: block;
    width: 125px;
    border: none;
    margin-right: 10px;
  }
}
.first-btn {
  border-right: 1px solid #fff;
  background: #fff;
  color: #333;
  border: 1px solid #e5e5e5;
}
span.integral::before {
  content: "";
  width: 20px;
  height: 20px;
  display: inline-block;
  background: url("/static/ethel_img/order_icon_integral.png") center center
    no-repeat;
  background-size: 100% 100%;
  vertical-align: middle;
}
.logistBox {
  width: 100%;
  height: auto;
  padding: 12px;
  background: #fff;
  p {
    height: 30px;
    line-height: 30px;
  }
  ul {
    height: auto;
    li {
      position: relative;
      padding-left: 20px;
      padding-bottom: 10px;
      &::before {
        width: 10px;
        height: 10px;
        max-height: 10px;
        border-radius: 50%;
        content: "";
        display: inline-block;
        background: #cccccc;
        margin-top: 2px;
        margin-right: 10px;
        position: absolute;
        left: 0px;
        background: #ffa1b0;
        z-index: 100;
      }
      &::after {
        width: 1px;
        height: 100%;
        content: "";
        display: inline-block;
        background: #cccccc;
        margin-top: 2px;
        margin-right: 10px;
        position: absolute;
        left: 4px;
        top: 0px;
      }
      span {
        font-size: 10px;
        color: #a09a9b;
      }
    }
  }
}
.totalBox {
  width: 100%;
  height: 40px;
  line-height: 40px;
  padding: 0 10px;
  position: relative;
  span {
    position: absolute;
    right: 10px;
  }
}
.orderno-box {
  height: auto;
  position: relative;
  margin-top: 10px;
  background: #fff;
  border-radius: 3px;
  padding: 0 12px;
  p {
    width: 100%;
    height: 40px;
    line-height: 40px;
    font-size: 11px;
    font-weight: bold;
    span {
      color:rgba(102,99,99,1);
      font-weight: 400;
    }
  }

}
.f-w {
  font-weight: 600
}
</style>
